<template>
  <div class="print-container">
    <div class="print-title">随访记录表</div>
    <div class="print-content">
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">患者姓名</div>
        </div>
        <div class="content-col w10 border-left">
          <div class="print-text">性别</div>
        </div>
        <div class="content-col w10">
          <div class="print-text">年龄</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">疾病诊断</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">实际联系方式</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">联系电话</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">呜呜呜</div>
        </div>
        <div class="content-col w10 border-left">
          <div class="print-text">22</div>
        </div>
        <div class="content-col w10">
          <div class="print-text">喜欢睡觉</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">15897396361</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">15897396361</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">{{ percent(data.contactTel) }}</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">停药原因</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是停药原因</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">客户反馈（定期检查结果、用药情况）</div>
        </div>
        <div class="content-col w80 border-left" style="min-height: 110px">
          <div class="print-text">这是客户反馈（定期检查结果、用药情况）</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">用药建议</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是用药建议</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">不良反应</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是不良反应</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">用药评估</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是用药评估</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">用药错误</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是用药错误</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">其他用药使用情况</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是其他用药使用情况</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">差错记录</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">无</div>
        </div>
      </div>
      <div class="content-row">
        <div class="content-col w20 border-right-0">
          <div class="print-text">再联系日期</div>
        </div>
        <div class="content-col w20 border-left">
          <div class="print-text">这是服务日期</div>
        </div>
        <div class="content-col w20">
          <div class="print-text">预约服务内容</div>
        </div>
        <div class="content-col" style="flex: 1">
          <div class="print-text">这是预约服务内容</div>
        </div>
      </div>
      <div class="content-row bottom-border">
        <div class="content-col w20 border-right-0">
          <div class="print-text">备注</div>
        </div>
        <div class="content-col w80 border-left">
          <div class="print-text">这是备注信息</div>
        </div>
      </div>
    </div>
    <div class="print-footer">
      <div>随访人：黄博文</div>
      <div>日期：2022-03-22</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Print",
  data() {
    return {
      data: {},
    };
  },
  methods: {
    setData(data) {
      this.data = data;
    },
    percent(data) {
      if (this.data) {
        return data ? data : "无";
      } else {
        return "无";
      }
    },
  },
};
</script>

<style lang="less">
.print-container {
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 800px;
  // margin: 20px auto;
  .print-title {
    font-weight: 700;
    margin-bottom: 30px;
    transform: scale(1.5);
  }
  .print-content {
    width: 100%;
    .content-row {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      box-sizing: border-box;
      border-top: 1px solid #000;
      min-height: 20px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      .content-col {
        // padding: 10px;
        box-sizing: border-box;
        border-right: 1px solid #000;
        line-height: 25px;
        min-height: 40px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .content-col:nth-last-child(1) {
        border-right: none !important;
      }
    }
  }
  .print-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
  }
}
.mh-140 {
  min-height: 140px !important;
}
.mh-80 {
  min-height: 80px !important;
}
.print-text {
  transform: scale(1);
}

.border-right-0 {
  border-right: none !important;
}
.border-left {
  border-left: 1px solid #000 !important;
}

.bottom-border {
  border-bottom: 1px solid #000;
}
.nobr {
  border-right: none !important;
}
.w5 {
  width: 5%;
}
.w7h {
  width: 7.5%;
}
.w10 {
  width: 10%;
}
.w15 {
  width: 15%;
}
.w20 {
  width: 20%;
}
.w80 {
  width: 80%;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w40 {
  width: 40%;
}
.w45 {
  width: 45%;
}
</style>
